<template>
  <div class="viewBox">
    <div class="headerTop">
      <div class="cmp">
        <img alt="" src="@/assets/computed.png">
        <span>统计1314</span>
      </div>
      <div class="dataTime">
        <span>{{ data }}</span>
        <span>{{ currentTime }}</span>
      </div>
      <div class="addPro">
        <span>+</span>
        添加项目
      </div>
    </div>

    <div class="content">
      <div class="bothSides contentLeft">
        <div>
          <div class="num">
            <div>62341235</div>
            <img alt="" src="@/assets/other.png">
          </div>
          <div class="title">总结单数量</div>
          <div class="reta">
            <div style="color:#2dcc6c">+27%</div>
            <img src="@/assets/up.png" />
          </div>
        </div>
        <div>
          <div class="num">
            <div>4636475623465</div>
            <img alt="" src="@/assets/other.png">
          </div>
          <div class="title">总用户数量</div>
          <div class="reta">
            <div style="color:#2dcc6c">+35%</div>
            <img src="@/assets/up.png" />
          </div>
        </div>
        <div>
          <div class="num">
            <div>62341235</div>
            <img alt="" src="@/assets/other.png">
          </div>
          <div class="title">总任务数量</div>
          <div class="reta">
            <div style="color:#cf454b">-12%</div>
            <img src="@/assets/down.png" />
          </div>
        </div>
      </div>
      <div class="contentCenter">
        <div class="charts">
          <div id="orderReceiving"></div>
        </div>
        <div class="ranking">
          <div class="title">
            <div>任务接单量排行</div>
            <div>人数</div>
          </div>
          <div class="progress">
            <div>
              <div>爆款防晒紫外线女夏季轻薄款 <span>23143.00</span></div>
              <el-progress :percentage="80" color="#0377ff" :show-text="false"></el-progress>
            </div>
            <div>
              <div>新款蓝牙耳机高质量真保音马卡龙色系 <span>5234.00</span></div>
              <el-progress :percentage="50" color="#00cbfd" :show-text="false"></el-progress>
            </div>

          </div>

          <div class="title2">
            <div>今日总佣金金额</div>
            <div class="dollar">￥953452.00</div>
          </div>
        </div>
      </div>

      <div class="bothSides contentRight">
        <div>
          <div class="num">
            <div><span>￥</span>62341235</div>
            <img alt="" src="@/assets/other2.png">
          </div>
          <div class="title">今日平台流水</div>
          <div class="reta">
            <div>+27%</div>
            <img src="@/assets/up3.png" /> 
          </div>
        </div>
        <div>
          <div class="num">
            <div><span>￥</span>23423</div>
            <img alt="" src="@/assets/other2.png">
          </div>
          <div class="title">今日平台收益</div>
          <div class="reta">
            <div>+45%</div>
            <img src="@/assets/up3.png" />
          </div>
        </div>
        <div>
          <div class="num">
            <div><span>￥</span>998773</div>
            <img alt="" src="@/assets/other2.png">
          </div>
          <div class="title">今日用户提现</div>
          <div class="reta">
            <div>+39%</div>
            <img src="@/assets/up3.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'index',
  data() {
    return {
      timer: '',
      currentTime: ''
    }
  },
  methods: {
    statisticalChart() {
      const myChart = echarts.init(document.getElementById('orderReceiving'))
      myChart.setOption({
        // 标题
        title:{
          text:'总结单量统计',
          y:'10px',
          x:'30px',
          textStyle:{
            color:'#fff',
            fontSize:'16',
            fontWeight:'normal'
          }
        },

        // 图例
        legend:{
          show: true,
          icon: "circle",
          y:'10px',
          formatter:'数量（个）',
          right:50,
          itemHeight:'10',
          textStyle:{
            color:'#fff'
          }
        },

        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.3)',
          borderColor:'rgba(0,0,0,0.3)',
          textStyle:{
            color:'#fff',
            fontWeight:'normal',
          },
          axisPointer : {
            type : 'none',
          },
        },

        xAxis: {
          type: 'category',
          data: ['05-01','05-02','05-03','05-04','05-05','05-06','05-07','05-08','05-09','05-10','05-11','05-12','05-13','05-14',],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#a4a4a4'
            }
          },
          axisTick: {
            show: false
          },
        },

        yAxis: {
          type: 'value',
          min: '200',
          max: '800',
          axisLine: {
            show: false,
            lineStyle: {
              color: '#a4a4a4'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#a4a4a4'
            }
          },
          axisLabel: {}
        },

        series: [{
          name: ' ',
          type: 'bar',
          barWidth: '35%',
          itemStyle: {
            normal: {
              color: '#02c8fd',
              barBorderRadius: 12
            }
          },
          data: [ 550, 563, 445,674,753,800,432,345,453,434,654,764,800,343]
        }
        ]
      })
    }
  },
  mounted() {
    this.statisticalChart()
  },
  created() {
    let _this = this
    this.timer = setInterval(() => {
      _this.currentTime = new Date().toLocaleTimeString()
    }, 1000)
  },
  computed: {
    data() {
      let d = new Date().toLocaleDateString().split('/')
      if (d[1] < 10) d[1] = 0 + d[1]
      if (d[2] < 10) d[2] = 0 + d[2]
      return d.join('.')
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="less" scoped>
.viewBox {
  width: 100%;
  height: calc(100vh - 50px);
  background: #202737;
  padding: 30px 40px;
  color: #a9acb7;
  font-size: 14px;
}

.headerTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  color: #fff;

  .cmp {
    display: flex;
    align-items: center;

    img {
      width: 20px;
      height: 20px;
    }

    span {
      padding-left: 26px;
    }
  }

  .dataTime {
    span {
      padding: 0 10px;
      letter-spacing: 1px;
    }
  }

  .addPro {
    border: 1px solid #a9acb7;
    border-radius: 15px;
    padding: 3px 8px;

    span {
      margin: 0 5px;
    }
  }
}

.content {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;
  height: calc(100% - 70px);
  column-gap: 20px;

  .bothSides {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: 1fr;
    row-gap: 20px;
    box-sizing: border-box;

    & > div {
      background: #33384f;
      padding: 30px;

      div {
        width: 100%;
      }

      .num {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24px;
        color: #fff;

        span {
          font-size: 15px;
        }

        img {
          width: 25px;
          height: 25px;
        }
      }

      .title {
        padding: 20px 0;
        font-size: 18px;
      }

      .reta {
        text-align: right;
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 17px;

        img {
          width: 27px;
          height: 27px;
        }
      }
    }
  }

  .contentLeft {
    & > div {
      &:first-child {
        border-left: 4px solid #30b9e3;
      }

      &:nth-child(2) {
        border-left: 4px solid #8c64a3;
      }

      &:last-child {
        border-left: 4px solid #db9e49;
      }
    }
  }

  .contentRight {
    color: #fff;

    & > div {
      &:first-child {
        background: #415A94;
      }

      &:nth-child(2) {
        background-image: linear-gradient(135deg, #4464DC, #c6269C, #FA803A);
      }

      &:last-child {
        background: #429492;
      }
    }
  }

  .contentCenter {
    display: grid;
    grid-template-rows: 1.4fr 1fr;
    row-gap: 20px;

    & > div {
      background: #31394d;
    }
  }
}

.charts{
  position: relative;
}
#orderReceiving{
  width:100%;
  height:calc(100% - 20px);
  position: absolute;
  bottom:0;
  left:0;
}

.ranking{
  padding:20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title{
    color:rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom:20px;
    border-bottom:1px solid #575c68;
  }
  .title2{
    color:rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top:20px;
    border-top:1px solid #575c68;
    .dollar{
      color:#ff0033;
    }
  }
  .progress{
    font-size:17px;
    padding-bottom:20px;
    span{
      color:#fff;
      float: right;
    }
    &>div{
      margin-top:20px;
    }
    /deep/ .el-progress{
      margin-top:15px;
      height:10px;
      div{
        height:100% !important;
      }
      .el-progress-bar__outer{
        background:#565d68;
      }
    }
  }
}
</style>
